<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../EaselJS/lib/easeljs-0.8.2.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="1050" height="420"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas"),
        stage = new createjs.Stage(canvas);

    var groundImage = 'http://cdn.gbtags.com/gblibraryassets/libid108/ground.png';
    var stageHeight = canvas.height;
    var stageWidth = canvas.width;
    var blockHeight = 70;

    var spritesheet;
    var characterHeight = 96;
    var characterWidth = 75;
    var characterGround = stageHeight - blockHeight - characterHeight;
    var moveLeft = false;
    var moveRight = false;
    var moveUp = false;
    var moveDown = false;
    var xVel = 5;
    var yVel = -5;
    var KEYCODE_SPACE = 32;
    var KEYCODE_LEFT = 37;
    var KEYCODE_RIGHT = 39;

    window.onload=function(){
        function setup() {
            var ground = new createjs.Bitmap(groundImage);
            //克隆5个地面图片生成游戏区域的地面效果
            for (i = 0; i < 50; i++) {
                var tempBlockGround = ground.clone();
                tempBlockGround.x = i * 70;
                tempBlockGround.y = stageHeight - blockHeight;
                stage.addChild(tempBlockGround);
            }

            spritesheet = new createjs.SpriteSheet({
                "images": ['http://cdn.gbtags.com/gblibraryassets/libid108/charactor.png'],
                "frames": {"height": 96, "count": 10, "width": 75},
                "animations": { run: [0,9]}
            });
            character = new createjs.Sprite(spritesheet);
            character.framerate = 30;
            character.x = 50;
            character.y = characterGround;
            stage.addChild(character);

            createjs.Ticker.addEventListener("tick", tick);
            document.onkeydown = handleKeyDown;
            document.onkeyup = handleKeyUp;
        }
        function handleKeyDown(e) {
            switch (e.keyCode) {
                case KEYCODE_LEFT:
                case 65:  // A
                    moveLeft = true;
                    character.play();
                    break;
                case KEYCODE_RIGHT:
                case 68:  // D
                    moveRight = true;
                    character.play();
                    break;
                case 87:  // D
                    moveUp = true;
                    character.play();
                    break;
                case 83:  // D
                    moveDown = true;
                    character.play();
                    break;
            }

        }
        function handleKeyUp(e) {
            console.log(e.keyCode);
            switch (e.keyCode) {
                case KEYCODE_LEFT:
                case 65:  // A
                    moveLeft = false;
                    character.gotoAndStop(0);
                    break;
                case KEYCODE_RIGHT:
                case 68:  //
                    moveRight = false;
                    character.gotoAndStop(0);
                    break;
                case 87:  //
                    moveUp = false;
                    character.gotoAndStop(0);
                    break;
                case 83:  //
                    moveDown = false;
                    character.gotoAndStop(0);
                    break;
            }
        }
        function tick(event) {
            //控制人物的移动和翻转效果
            if (moveLeft) {
                character.x -= xVel;
                if (character.scaleX > 0) {
                    console.log(character.scaleX);
                    character.scaleX *= -1;
                    character.x += 100;
                }

            }else if (moveRight) {
                character.x += xVel;
                if (character.scaleX < 0) {
                    character.scaleX *= -1;
                    character.x -= 100;
                }
            }else if(moveUp){
                character.y += yVel;
                if (character.scaleY < 0) {
                    character.scaleY *= -1;
                    character.x -= 100;
                }
            }else if(moveDown){
                character.y -= yVel;
                if (character.scaleY < 0) {
                    character.scaleY *= 1;
                    character.x -= 100;
                }
            }
            stage.update();
        }
        setup();
    };
</script>
</body>
</html>